<!-- ignore the following lines, they are not important to this demo -->
<jigsaw-demo-description [summary]="summary" [content]="description">
</jigsaw-demo-description>


<!-- start to learn the demo from here -->
<div class="live-demo-wrap">
    <h2>Rate</h2>
    <div class="clearfix">
        <div class="demo-1 live-demo live-demo-block">
            <h3>基本</h3>
            <p class="comment">基本用法</p>
            <jigsaw-rate class="rate-font-size" max="5" icon="fa fa-paper-plane" [(value)]="selectedValue" (valueChange)="selectChange($event)"></jigsaw-rate>
        </div>

        <div class="demo-2 live-demo live-demo-block">
            <h3>半星</h3>
            <p class="comment">支持选中半星</p>
            <jigsaw-rate class="rate-font-size" max="5" [allowHalf]="true" [(value)]="selectedHalfValue" (valueChange)="selectChange($event)"></jigsaw-rate>
        </div>

        <div class="demo-2 live-demo live-demo-block">
            <h3>只读</h3>
            <p class="comment">支持标签和属性两种写法</p>
            <jigsaw-rate class="rate-font-size" max="5" [disabled]="true" [(value)]="selectedValue"></jigsaw-rate>
        </div>
    </div>
</div>
